<template>
	<!-- 运营系统-充值模板 -->
	<d2-container class="d-flex flex-column">
		<template v-if="$hasPermission('playlet:rechargeTemplate:index')">
			<div v-if="info.addTemplate" slot="header" class="d-flex mb-5" style="width: 100px;">
				<el-button ref="backBtn" type="primary" icon="" @click="addTemplate(false)">返回</el-button>
			</div>
			<div v-if="info.addTemplate" class="d-flex a-center j-center" slot="footer">
				<div class="d-flex my-5 b-s">
					<el-button class="mr-10">取消</el-button>
					<el-button type="primary" @click.stop="dataFormSubmitHandle">保存</el-button>
				</div>
			</div>
			<template v-if="info.addTemplate">
				<div class="d-flex h-100 b-s flex-column overflow">
					<el-form class="d-flex b-s py-10 px-10 mb-10" style="background-color: #f5f5f5;" :inline="true"
						size="medium" :model="templateForm">
						<el-form-item class="mb-0" label="模板名称">
							<el-input v-model="templateForm.name" placeholder="模板名称" clearable />
						</el-form-item>
						<el-form-item prop="company_id" label="选择公司">
							<el-select clearable v-model="templateForm.company_id" placeholder="请选择公司"
								@focus="companyFocusFn(false)" @clear='clearCompanyFn' @change='clearCompanyFn'>
								<el-option v-for="(item,index) in companyName" :key="index" :label="item.label"
									:value="parseInt(item.value)"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-if="templateForm.company_id" prop="applet_id" label="选择小程序">
							<el-select clearable v-model="templateForm.applet_id" placeholder="请选择"
								@focus="getAppletFn">
								<el-option v-for="(item,index) in appletList" :key="index" :label="item.label"
									:value="parseInt(item.value)"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div class="d-flex flex-row">
						<div class="d-flex item flex-column p-10 b-s w-50 mr-5" style="background-color: #f5f5f5;">
							<div class="d-flex item flex-column b-s mb-10" style="background-color: #f5f5f5;">
								<div class="d-flex item-title a-center">
									<div class="d-flex mr-2"
										style="width:6px;height: 22px;background-color: #3291f8;border-radius: 5px;">
									</div>
									<div class="d-flex">常规档位</div>
								</div>
								<el-form v-for="(item,index) in templateForm.convention" :key="index"
									class="d-flex pt-10 pl-5 b-s mt-10 flex-column" :inline="false" size="small"
									:model="item">
									<el-form-item class="mb-10">
										<div class="d-flex">
											<div class="d-flex flex-shrink">
												{{item.name}}
											</div>
											<div class="d-flex flex-column">
												<div class="d-flex flex-row mb-5">
													<el-input class="mx-10" v-model="item.amount" placeholder="请输入"
														@input="(v)=>(item.amount=oninput(v,2))"
														@focus="focusFn($event,item,'amount')" @blur="curent=''"
														clearable>
														<template slot="prepend">充</template>
														<template slot="append">元</template>
													</el-input>
													<div class="d-flex flex-shrink">
														追剧币 {{handleNum(item.amount)}}
													</div>
												</div>
												<div class="d-flex flex-row">
													<el-input class="mx-10" v-model="item.give_coin" placeholder="请输入"
														@input="(v)=>(item.give_coin=oninput(v,2))"
														@focus="focusFn($event,item,'give_coin')" @blur="curent=''"
														clearable>
														<template slot="prepend">赠</template>
														<template slot="append">币</template>
													</el-input>
													<div class="d-flex flex-shrink">
														追剧币 {{item.give_coin}}
													</div>
												</div>
											</div>
											<div v-if="templateForm.convention.length>1&&templateForm.convention.length == index+1"
												class="d-flex a-center j-center pl-10 pr-5"
												@click.stop="deleteConvention(index,item.value)">
												<div class="d-flex a-center j-center close pointer">
													<d2-icon class="d-flex close-icon" name="close" />
												</div>
											</div>
										</div>
									</el-form-item>
								</el-form>
								<div class="d-flex a-center j-center">
									<el-button type="primary" icon="" @click="addConventionaList()"> 新增常规档位 </el-button>
								</div>
							</div>
							<div class="d-flex item flex-column b-s mb-5" style="background-color: #f5f5f5;">
								<div class="d-flex item-title a-center">
									<div class="d-flex mr-2"
										style="width:6px;height: 22px;background-color: #3291f8;border-radius: 5px;">
									</div>
									<div class="d-flex">超级会员档位</div>
								</div>
								<el-form v-for="(item,index) in templateForm.member" :key="index"
									class="d-flex px-10 b-s mt-10 flex-column" :inline="false" size="small"
									:model="item">
									<el-form-item class="">
										<div class="d-flex">
											<div class="d-flex flex-shrink">
												{{item.name}}
											</div>
											<div class="d-flex flex-column">
												<div class="d-flex flex-row a-center mb-5">
													<el-input class="mx-10" v-model="item.amount" placeholder="请输入"
														@input="(v)=>(item.amount=oninput(v,2))"
														@focus="focusFn($event,item,'amount')" @blur="curent=''"
														clearable>
														<template slot="prepend">充</template>
														<template slot="append">元</template>
													</el-input>
													<div class="d-flex flex-shrink">
														<el-switch v-model="item.status"
															@change="changeStatus(item)"></el-switch>
													</div>
												</div>
											</div>
										</div>
									</el-form-item>
								</el-form>
							</div>
							<div class="d-flex item flex-column b-s" style="background-color: #f5f5f5;">
								<div class="d-flex item-title a-center">
									<div class="d-flex mr-2"
										style="width:6px;height: 22px;background-color: #3291f8;border-radius: 5px;">
									</div>
									<div class="d-flex">促销档位</div>
								</div>
								<el-form v-for="(item,index) in templateForm.promotion" :key="index"
									class="d-flex p-10 b-s my-10 flex-column" :inline="false" size="small"
									:model="item">
									<el-form-item class="mb-10">
										<div class="d-flex">
											<div class="d-flex flex-shrink">
												整剧购买
											</div>
											<div class="d-flex flex-column mr-10">
												<div class="d-flex flex-row mb-5">
													<el-input class="mx-10" v-model="item.amount" placeholder="请输入"
														@input="(v)=>(item.amount=oninput(v,2))"
														@focus="focusFn($event,item,'amount')" @blur="curent=''"
														clearable>
														<template slot="prepend">充</template>
														<template slot="append">元</template>
													</el-input>
													<div class="d-flex flex-shrink">
														解锁投放剧集
													</div>
												</div>
											</div>
											<div class="d-flex flex-shrink a-center">
												<el-switch class="d-flex" v-model="item.status"
													@change="changeStatus(item)"></el-switch>
											</div>
										</div>
									</el-form-item>
								</el-form>
							</div>
						</div>
						<div class="d-flex item flex-column p-10 b-s w-50 ml-5" style="background-color: #f5f5f5;">
							<div class="d-flex item-title a-center">
								<div class="d-flex mr-2"
									style="width:6px;height: 22px;background-color: #3291f8;border-radius: 5px;"></div>
								<div class="d-flex">播放页充值页面设置</div>
							</div>
							<div class="item-simulate mt-15">
								<div class="d-flex list">
									<div v-for="(item,index) in dataForm" :key="index" :id="item.value"
										class="box box-normal"
										:class="{'box-active':curent==item.value,'box-normal':item.type==0,'box-superVip':item.type==3,'box-promotion':item.type==2}">
										<img v-if="curent==item.value" class="pointer" src="./image/click_mack.gif"
											alt="">
										<p v-if="item.type==3" class="give">超级会员</p>
										<p class="price">
											￥
											<em>{{item.amount||0}}</em>
											<i v-if="item.type==3">{{'/'+item.day+'天'}}</i>
										</p>
										<div v-if="item.type==0" style="height: 20px;"></div>
										<p v-if="item.type==3" class="tip">低至每日1元起</p>
										<p class="get">
											{{item.type==0?handleGetNum(item.amount,item.give_coin):item.type==3?'全场剧集免费观看':item.type==2?'解锁整剧全集':''}}
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</template>
			<template v-else>
				<div slot="header" class="d-flex mb-10">
					<el-form class="d-flex b-s" :inline="true" size="small" :model="searchForm"
						@keyup.enter.native="getTableList()">
						<el-form-item prop="company_id" label="选择公司">
							<el-select clearable v-model="searchForm.company_id" placeholder="请选择公司"
								@focus="companyFocusFn(false)" @clear='clearCompanyFn' @change="clearCompanyFn">
								<el-option v-for="(item,index) in companyName" :key="index" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item prop="applet_id" v-if="searchForm.company_id" label="选择小程序">
							<el-select clearable v-model="searchForm.applet_id" placeholder="请选择小程序"
								@focus="getAppletFn">
								<el-option v-for="(item,index) in appletList" :key="index" :label="item.label"
									:value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button icon="el-icon-search" type="primary" @click="getTableList()">查询</el-button>
						</el-form-item>
						<el-form-item v-show="$hasPermission('playlet:rechargeTemplate:create')">
							<el-button icon="el-icon-circle-plus-outline" type="success"
								@click="addTemplate()">新增自定义充值模板</el-button>
						</el-form-item>
					</el-form>
				</div>
				<vxe-table ref="xTable" border height="100%" resizable :data="dataList" :loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}">
					<vxe-column width="100" field="id" title="模板ID" sortable align="center"></vxe-column>
					<vxe-column width="180" field="name" title="模板名称" align="center"></vxe-column>
					<vxe-column width="180" field="company_name" title="公司名称" align="center"></vxe-column>
					<vxe-column width="150" field="applet_name" title="小程序名称" align="center"></vxe-column>
					<vxe-colgroup title="档位预览" align="center">
						<vxe-column width="248" field="convention" title="普通充值" align="center">
							<template v-slot="{ row }">
								<div v-for="(item,index) in row.convention" :key="index" class="w-100"
									:class="{'mb-3':row.convention.length>1&&index+1!=row.convention.length}">{{item}}
								</div>
							</template>
						</vxe-column>
						<vxe-column width="248" field="member" title="超级会员" align="center">
							<template v-slot="{ row }">
								<div v-for="(item,index) in row.member" :key="index" class="w-100"
									:class="{'mb-3':row.member.length>1&&index+1!=row.member.length}">{{item}}</div>
							</template>
						</vxe-column>
						<vxe-column width="248" field="promotion" title="促销档位" align="center">
							<template v-slot="{ row }">
								<div v-for="(item,index) in row.promotion" :key="index" class="w-100"
									:class="{'mb-3':row.promotion.length>1&&index+1!=row.promotion.length}">{{item}}
								</div>
							</template>
						</vxe-column>
					</vxe-colgroup>
					<vxe-column width="160" field="created_at" title="创建时间" sortable cell-type="string"
						align="center"></vxe-column>
					<vxe-column width="160" field="updated_at" title="修改时间" sortable cell-type="string"
						align="center"></vxe-column>
					<vxe-column width="100" field="status_name" title="状态" align="center"></vxe-column>
					<vxe-column title="操作" width="200" align="center" fixed="right">
						<template #default="{ row }">
							<el-button size="medium" round icon="el-icon-edit"
								v-show="$hasPermission('playlet:rechargeTemplate:update')"
								@click="addTemplate(true,row)" type="primary">修改</el-button>
	<!-- 						<el-button size="medium" round icon="el-icon-delete"
								v-show="$hasPermission('playlet:rechargeTemplate:delete')"
								@click="deleteHandleSetter(row)" type="primary">删除</el-button> -->
						</template>
					</vxe-column>
					<template #empty>
						<div class="d-flex flex-row a-center j-center font-md">
							<div class="d-flex">
								暂时没有充值模板~
							</div>
						</div>
					</template>
				</vxe-table>
				<!-- 分页 -->
				<div class="d-flex" slot="footer">
					<vxe-pager background size="medium" align="right" :border="false" :current-page="dataForm.page"
						:page-size="dataForm.pageSize" :total="total"
						:layouts="['PrevPage', 'Number', 'NextPage', 'Sizes', 'FullJump', 'Total']"
						@page-change="handlePageChange">
					</vxe-pager>
				</div>
			</template>
		</template>
		<template v-else>
			<div class="d-flex h-100 b-s flex-column">
				没有操作权限
			</div>
		</template>
	</d2-container>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mixinViewModule from '@/mixins/view-module'
	import {
		Decimal
	} from 'decimal.js'
	export default {
		mixins: [mixinViewModule],
		components: {},
		data() {
			return {
				permissionBase64: '',
				tableLoading:false,
				templateId: '',
				curent: 0,
				page: 1,
				pageSize: 10,
				total: 0,
				firstConvention: {},
				searchForm: {
					company_id: '',
					applet_id: ''
				},
				dataForm: [],
				templateForm: {},
				companyName: [],
				appletList: [],
				sortInfo: [], //排序
				// 增改
				dataList: [],
			}
		},
		created() {},
		mounted() {
			if (this.$hasPermission('playlet:rechargeTemplate:index')) {
				if (this.info.addTemplate) {
					if (this.info.templateId) {
						this.templateId = this.info.templateId;
						this.getTemplateData(this.info.templateId);
					} else {
						this.getTempleteFn();
					}
				} else {
					this.getTableList();
				}
			}
		},
		watch: {
			sortInfo: {
				handler(newValue) {
					console.warn('===排序改变===');
					console.log(newValue);
				},
				deep: true
			},
			templateForm: {
				handler(newValue) {
					// console.warn('监听到了');
					// console.log(newValue);
					this.dataForm = [];
					// console.log(this.sortInfo.length);
					let a = [],
						b = this.sortInfo,
						c = [];
					for (let key in newValue) {
						if (Array.isArray(newValue[key])) {
							for (var i = 0; i < newValue[key].length; i++) {
								if (newValue[key][i].value) {
									if (newValue[key][i].status) {
										c.push(newValue[key][i]);
									}
									if (b.indexOf(newValue[key][i].value) > -1) {
										a.push(newValue[key][i]);
									}
								}
							}
						}
					}
					if (b.length) {
						// console.log('===排序===');
						//排序
						this.dataForm = a.sort(function(item1, item2) {
							return b.indexOf(item1.value) - b.indexOf(item2.value);
						});
					} else {
						// console.log('===没有排序===');
						this.dataForm = c;
					}
					// console.log(this.dataForm);
				},
				deep: true
			}
		},
		computed: {
			...mapState('d2admin/user', [
				'info'
			])
		},
		methods: {
			...mapMutations({
				pageInit: 'd2admin/page/init',
				headerSet: 'd2admin/menu/headerSet'
			}),
			handleGetNum(amount, give_coin) {
				if (amount == 0) {
					return (amount || 0) + '币+' + '送' + (give_coin || 0) + '币';
				} else {
					return (new Decimal(amount).times(100).toFixed(2).replace(/\.?0+$/, '')) + '币+' + '送' + give_coin +
					'币';
				}
			},
			focusFn(event, item, field) {
				let value = event.target.value;
				this.curent = item.value;
				if (value == 0) {
					item[field] = '';
				}
			},
			handleNum(num) {
				if (num) {
					let number = new Decimal(num);
					let result = number.times(100).toFixed(2);
					result = result.replace(/\.?0+$/, '');
					return result;
				}
			},
			oninput(num, limit) {
				let str = num,
					len1 = str.substr(0, 1),
					len2 = str.substr(1, 1);
				//如果第一位是0，第二位不是点，就用数字把点替换掉
				if (str.length > 1 && len1 == 0 && len2 != ".") {
					str = str.substr(1, 1)
				}
				//第一位不能是.
				if (len1 == ".") {
					str = ""
				}
				//限制只能输入一个小数点
				if (str.indexOf(".") != -1) {
					let str_ = str.substr(str.indexOf(".") + 1)
					if (str_.indexOf(".") != -1) {
						str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
					}
				}
				//正则替换
				str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
				if (limit / 1 === 1) {
					str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
				} else {
					str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位
				}
				str = str.substr(0, 6);
				return str;
			},
			clearCompanyFn() {
				this.$set(this.searchForm, 'applet_id', '');
				this.$set(this.templateForm, 'applet_id', '');
				this.appletList = [];
			},
			//公司列表
			async companyFocusFn(init = true) {
				const companyRes = await this.$axios.get('/api/common/company');
				console.log(companyRes);
				if (Array.isArray(companyRes)) {
					if (companyRes.length) {
						if (init && !this.dataId) {
							this.dataForm.company_id = companyRes[0].value;
						}
						this.companyName = companyRes;
					}
				}
			},
			//小程序列表
			async getAppletFn() {
				console.log(this.searchForm);
				const appletRes = await this.$axios.get(
					`/api/playlet/company/getApplet/${this.searchForm.company_id||this.templateForm.company_id}`);
				console.log(appletRes);
				if (Array.isArray(appletRes)) {
					if (appletRes.length) {
						this.appletList = appletRes;
					}
				}
			},
			//模板列表
			async getTempleteFn() {
				const templeteRes = await this.$axios.get('/api/common/templete');
				if (typeof templeteRes == 'object' && templeteRes != null) {
					console.log(templeteRes);
					this.templateForm = templeteRes;
					let convention = this.templateForm.convention,
						member = this.templateForm.member,
						promotion = this.templateForm.promotion;
					if (Array.isArray(convention)) {
						if (convention.length) {
							const f_convention = Object.assign({}, convention[0]);
							console.log(f_convention);
							this.firstConvention = f_convention;
							for (let i = 0; i < convention.length; i++) {
								convention[i]['name'] = convention[i]['name'] + (i + 1);
								convention[i]['value'] = this.getValue('convention');
								this.sortInfo.push(convention[i]['value']);
							}
						}
					}
					if (Array.isArray(member)) {
						if (member.length) {
							for (let i = 0; i < member.length; i++) {
								member[i]['value'] = this.getValue('member');
							}
						}
					}
					if (Array.isArray(promotion)) {
						if (promotion.length) {
							for (let i = 0; i < promotion.length; i++) {
								promotion[i]['value'] = this.getValue('promotion');
							}
						}
					}
				}
			},
			// 生成58位的唯一的value值
			getValue(field = '') {
				let len = 58,
					chars = field + 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678',
					maxPos = chars.length,
					value = '';
				for (let t = 0; t < len; t++) {
					value += chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return value;
			},
			changeStatus(item) {
				if (item.status) {
					this.sortInfo.push(item.value);
				} else {
					if (Array.isArray(this.sortInfo)) {
						const len = this.sortInfo.length,
							sort_index = this.sortInfo.indexOf(item.value);
						if (sort_index + 1 <= len) {
							this.sortInfo.splice(sort_index, 1);
						}
					}
				}
			},
			// 表单提交
			dataFormSubmitHandle() {
				console.log('表单提交');
				this.$axios.post(this.templateId ? `/api/playlet/rechargeTemplate/update/${this.templateId}` :
					'/api/playlet/rechargeTemplate/create', {
						...this.templateForm,
						sortInfo: this.sortInfo
					}).then(res => {
					this.addTemplate(false);
					this.getTableList();
					this.$message({
						message: this.$t('views.public.success'),
						type: 'success',
						duration: 1500,
						onClose: () => {}
					})
				}).catch(() => {})
			},
			addConventionaList() {
				let len = this.templateForm.convention.length;
				if (len > 5) {
					return this.$message({
						message: '常规档位最多添加6条',
						type: 'error',
						duration: 1200
					});
				}
				let addConvention = Object.assign({}, this.firstConvention);
				addConvention['id'] = 0;
				addConvention['name'] = addConvention['name'] + (len + 1);
				addConvention['value'] = this.getValue('convention');
				this.templateForm.convention.push(addConvention);
				this.sortInfo.push(addConvention['value']);
				console.log(this.templateForm.convention);
			},
			tapbox(item, index) {
				this.curent = index;
				console.log(this.curent);
			},
			deleteConvention(index, value) {
				console.log('deleteConventiondeleteConventiondeleteConvention');
				if (this.templateForm.convention.length > 1) {
					this.templateForm.convention.pop();
				}
				if (Array.isArray(this.sortInfo)) {
					const len = this.sortInfo.length,
						sort_index = this.sortInfo.indexOf(value);
					if (sort_index + 1 <= len) {
						this.sortInfo.splice(sort_index, 1);
						console.log(this.sortInfo);
					}
				}
			},
			async getTableList() {
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/playlet/rechargeTemplate?' + this.$qs.stringify(this.dataForm));
				this.tableLoading = false;
				this.dataList = tableRes.data;
				this.total = tableRes.total;
			},
			//新增自定义充值模板
			async addTemplate(isTemplate = true, row) {
				console.log('显示自定义充值模板：' + isTemplate);
				if (this.info.addTemplate == isTemplate) return;
				if (isTemplate) {
					if (typeof row == 'object' && row != null) {
						console.log('编辑自定义充值模板');
						this.templateId = row.id;
						this.info.templateId = row.id;
						this.getTemplateData(this.templateId);
					} else {
						console.log('新建自定义充值模板');
						await this.getTempleteFn();
					}
				} else {
					this.templateId = null;
					this.info.templateId = null;
					this.getTableList();
				}
				console.log(this.info);
				this.info.addTemplate = isTemplate;
				this.$forceUpdate();
				await this.$store.dispatch('d2admin/user/set', this.info, {
					root: true
				})
			},
			//获取充值模板详情
			async getTemplateData(templateId) {
				console.log('获取充值模板详情');
				const templateRes = await this.$axios.get(`/api/playlet/rechargeTemplate/update/${templateId}`);
				if (typeof templateRes == 'object' && templateRes != null) {
					console.log(templateRes);
					this.templateForm = templateRes;
					this.companyFocusFn(true);
					this.getAppletFn();
					this.sortInfo = templateRes.sortInfo;
					let convention = this.templateForm.convention;
					if (Array.isArray(convention)) {
						if (convention.length) {
							const f_convention = Object.assign({}, convention[0]);
							if (typeof f_convention == 'object' && f_convention != null) {
								if (f_convention.name && typeof f_convention.name == 'string') {
									f_convention.name = f_convention.name.replace(/\d+/g, '');
								}
							}
							console.log(f_convention);
							this.firstConvention = f_convention;
						}
					}
				}
			},
			// 删除
			deleteHandleSetter(row) {
				this.$confirm(this.$t('public.prompt.info', {
					handle: this.$t('views.public.delete')
				}), this.$t('public.prompt.title'), {
					confirmButtonText: this.$t('views.public.confirm'),
					cancelButtonText: this.$t('views.public.cancel'),
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/api/playlet/rechargeTemplate/delete/${row.id}`, {}).then(res => {
						this.getTableList();
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 1500,
							onClose: () => {}
						})
					}).catch(() => {})
				}).catch(() => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep(.cellclass) {
		// height: 100px !important;
	}

	.item {
		.close {
			width: 26px;
			height: 26px;
			border: 2px solid #f76f21;
			border-radius: 26px;

			.close-icon {
				font-size: 20px;
				color: #f76f21;
			}
		}

		.item-title {
			font-size: 22px;
			font-weight: bold;
		}

		.item-simulate {
			box-sizing: border-box;
			border: 6px solid #a3a2a2;
			border-radius: 10px;
			width: 375px;
			min-height: 700px;
			max-height: 1200px;
			margin: 0 auto 10px;
			padding: 10px 5px;

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: flex-start;

				.box {
					width: 165px;
					height: 115px;
					cursor: default;
					background: #efefef;
					border: 2px solid #f5f5f5;
					border-radius: 10px;
					display: flex;
					position: relative;
					flex-direction: column;
					justify-content: flex-end !important;
					padding: 0 !important;
					box-sizing: content-box;
					margin-top: 10px;
					align-items: center;
					overflow: hidden;

					.tip {
						height: 22px;
						font-size: 12px;
						margin: 0;
						color: #bf891c;
					}

					.give {
						position: absolute;
						left: -2px;
						top: 3px;
						width: 100px;
						height: 20px;
						text-align: center;
						color: #fff;
						line-height: 20px;
						font-size: 11px;
						z-index: 2;
						margin: 0;
						border-radius: 10px 0 10px 0;
						background: #f53732;
					}

					.pointer {
						width: 50%;
						height: auto;
						position: absolute;
						bottom: 10px;
						right: -10px;
					}

					.price {
						font-size: 15px;
						font-weight: 600;
						line-height: 35px;
						margin: 0;

						em {
							font-size: 35px;
							font-style: normal;
						}
					}

					.get {
						width: 100%;
						height: 28px;
						line-height: 28px;
						text-align: center;
						background: linear-gradient(180deg, #fff19d, #ff9e00);
						border-radius: 0 0 5px 5px;
						font-size: 14px;
						color: #583600;
						letter-spacing: 1px;
						font-weight: 500;
						margin: 0px;
					}
				}

				.box-normal {
					.price {
						color: #f76f21;

						i {
							font-size: 15px;
							color: #f95e5e;
						}
					}

					.get {
						background: #fff7e3;
						color: #bf891c;
					}
				}

				.box-superVip {
					background: url() no-repeat;
					border: none;
					background-size: 105% 105%;
					border: 2px solid #f5f5f5;

					.price {
						color: #8d5a0b;
					}

					.get {
						background: #6b4403;
						color: #fff;
						font-size: 12px;
					}
				}

				.box-promotion {
					background: url() no-repeat;
					border: none;
					background-size: 105% 105%;
					border: 2px solid #f5f5f5;

					.price {
						margin-bottom: 16px;
					}

					.get {
						background: #fe5a40;
						color: #fff;
						font-size: 12px;
					}
				}

				.box-active {
					border: 2px solid #f97d36;
				}
			}
		}
	}
</style>